Fix mobile LCP regression on cards library page: load Typekit font async by lamontacrook · Pull Request #20 · AdobeDevXSC/hal

lamontacrook · 2026-07-17T17:08:53Z

Summary

Investigated the mobile LCP regression flagged by aem-psi-check on /docs/library/blocks/cards (score 70, LCP 9.5-9.6s) using real Lighthouse traces (--throttling-method=devtools, matching actual CI conditions rather than simulated throttling).
The Lighthouse LCP breakdown showed the cause was not the cards aspect-ratio redesign (PR Add remaining authorable blocks to component model files #17/Redesign cards block: large, no-image, sliding, and itinerary variants #19): resourceLoadDelay alone was ~4.5-6s, before any block CSS/JS/image even started fetching. Byte size of the LCP image was already ruled out (confirmed ~14KB regardless of requested width).
Root cause: head.html loaded the Adobe Fonts (Typekit) stylesheet for the nav as a synchronous, render-blocking, cross-origin <link> (use.typekit.net/mvi1kov.css, chained to a second p.typekit.net/p.css request). Under mobile network throttling this monopolizes network priority/bandwidth for several seconds, delaying every subsequent block resource — including the true LCP image — regardless of what that image looks like. This link predates the cards redesign (added in the earlier nav rebuild) and bypassed the project's existing async font-loading pattern (loadFonts() in scripts/scripts.js, already used for fonts.css's Roboto fallback).
Fix: removed the blocking <link> from head.html and load the same stylesheet inside loadFonts() via loadCSS(), so it loads as a progressive enhancement (Roboto fallback covers text until it swaps in), consistent with how fonts.css is already loaded.
Locally, this cut devtools-throttled mobile LCP from 7.3s to 3.9s (score 0.59 → 0.77) on the same page; the remaining local delay includes a dev-only livereload.js injection that won't exist on the deployed preview.

Preview: https://fix-cards-mobile-lcp--hal--adobedevxsc.aem.page/docs/library/blocks/cards

Test plan

npm run lint passes
Verified locally in browser: page renders correctly, nav font still applies (async swap), no new console errors
Confirmed root cause via real Lighthouse traces (lighthouse --throttling-method=devtools --form-factor=mobile) before/after the fix
Confirm aem-psi-check reports mobile LCP under ~4s on the preview URL above

🤖 Generated with Claude Code

Lighthouse traces (throttling-method=devtools) show the LCP regression on /docs/library/blocks/cards is not caused by the cards aspect-ratio change: the LCP breakdown shows ~4.5s of "resource load delay" before any block CSS/ JS/images even start fetching, because a render-blocking, cross-origin Typekit stylesheet (chained to a second p.typekit.net request) monopolizes network priority under mobile throttling. This link bypassed the existing async font-loading pattern already used for fonts.css. Moving it into loadFonts() lets it load as a progressive enhancement, same as the Roboto fallback fonts, cutting local devtools-throttled mobile LCP from 7.3s to 3.9s.

aem-code-sync · 2026-07-17T17:08:56Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.